﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="WebApplication1.UploadFile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Drag n' Drop File Upload</title>
    <link href="/Style.css" rel="Stylesheet" />

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

    <script type="text/javascript">
        var dropZone;

        var files;
        //khởi tạo các dropzone
        $(document).ready(function () {
            dropZone = $('#dropZone');
            dropZone.removeClass('error');

           

            // Kiểm tra nếu window.FileReader tồn tại để 
            // Chắc chắn rằng trình duyệt hỗ trợ tập tin tải lên
            if (typeof(window.FileReader) == 'undefined') {
                dropZone.text('Trình duyệt không hỗ trợ!');
                dropZone.addClass('error');
                return;
            }

            

            //Thêm một hiệu ứng kéo 
            dropZone[0].ondragover = function () {
                dropZone.addClass('hover');
                return false;
            };

            

            // Loại bỏ các hiệu ứng kéo khi dừng kéo
            dropZone[0].ondragend = function () {
                dropZone.removeClass('hover');
                return false;
            };

            
            //Sự kiện thả xử lý các tập tin gửi
            dropZone[0].ondrop = function(event) {
                

                //Ngừng các trình duyệt  mở tập tin trong cửa sổ
                event.preventDefault();
                dropZone.removeClass('hover');

                

                //Lấy tập tin và đọc các tập tin
                var file = event.dataTransfer.files[0];

                files=file;

                //Xác nhận kích thước tập tin
                if(file.size > <%=maxRequestLength%>) {
                    dropZone.text('File quá lớn!');
                    dropZone.addClass('error');
                    return false;
                }

//                  var request = $.ajax({
//                        url: "TrangXuLy.aspx",
//                        type: "GET",
//                        data: "v=" + sove + "&l=" + loaive+"&phim="+ID_Phim,
//                        dataType: "html"
//                    });
//                    request.done(function(dat) {

//                        eval("var d = " + dat);
//                        var ve = d.SoVe;
//                        var tongtien = 0;
//                        tongtien += parseInt(giave) * ve;
//                        myli.find("strong").html(parseInt(giave) * ve + " VNĐ");
//                        TinhTongTien();
//                    });
                //Gửi tập tin
//                var xhr = new XMLHttpRequest();
//                xhr.upload.addEventListener('progress', uploadProgress, false);
//                xhr.onreadystatechange = stateChange;
//                xhr.open('POST', '/Default.aspx', true);
//                xhr.setRequestHeader('X-FILE-NAME', file.name);
//                xhr.send(file);
                    var request=$.ajax({
                        url:"UploadFile.aspx",
                        type:"POST",
                        data:file.name,
                        type:"html"

                    });
            };
        });

        //Hiển thị tiến trình tải lên
        function uploadProgress(event) {
            var percent = parseInt(event.loaded / event.total * 100);
            $('#dropZone').text('Uploading: ' + percent + '%');
        }

     
        //Hiện tải lên hoàn toàn hoặc tải lên không phụ thuộc vào kết quả
        function stateChange(event) {
            if (event.target.readyState == 4) {
                if (event.target.status == 200 || event.target.status == 304) {
                  
                    $('#dropZone').append('<p>'+files.name.toString()+'</p>');
                    $('#result').append('<p>'+files.name.toString()+'</p>');
                }
                else {
                    dropZone.text('Upload Failed!');
                    dropZone.addClass('error');
                }
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id="dropZone">
        Drop File Here to Upload.
    </div>
    <div id="result" style=" background-color:Black; color:White; width:300px; margin-left:500px; height:300px">
        <h2>List File Upload</h2>
    </div>
    </form>
</body>
</html>
